<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>成都杜甫草堂-实时信息</title>
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/infoDisplay1.css">
</head>
<body>
    <div class="info-box" id="infoDisplay">
        <div class="head-box">
            <div class="time-weather-box">
                <div class="time-box">
                    <div class="time">{{time}}</div>
                    <div class="date">{{date}}</div>
                </div>
                <div class="weather-box">
                    <div class="icon-box">
                        <img v-if="weatherHourList.length > 0" :src="weatherIconUrl" alt="">
                    </div>
                    <div class="info">
                        <div class="temperature" v-if="weatherHourList.length > 0">{{temperature}}&#8451</div>
                        <div class="weather" v-if="weatherHourList.length > 0">{{weather}}</div>
                    </div>
                </div>
            </div>
            <div class="msg-box">
                <div class="border-box">
                    <div class="real">实时信息公告：</div>
                    <div class="trailer">最新活动预告：</div>
                </div>
            </div>
            <div class="tourists">
                <div>当前在馆游客</div>
                <div class="number">10000<span class="ren">&nbsp;&nbsp;&nbsp;&nbsp;人</span></div>
            </div>
        </div>
        <div class="content">
            <div class="left-box">
                <div class="one-box">
                    <div class="con-box">
                        <div><img src="/static/img/icon/讲解.png" alt=""></div>
                    </div>
                    <div class="con-box">
                        <div class="title">定时讲解</div>
                        <div class="p1">北门13：00开始</div>
                        <div class="p1">可约讲解员：</div>
                        <div class="p1">正门：15人；北门：12人；</div>
                        <div class="p1">东门：10人；南门：8人。</div>
                    </div>
                </div>
                <div class="one-box">
                    <div class="con-box">
                        <div><img src="/static/img/icon/导览机.png" alt=""></div>
                    </div>
                    <div class="con-box">
                        <div class="title">剩余导览设备</div>
                        <div class="p1">语音导览机：</div>
                        <div class="p1">正门：15台；北门：12台；</div>
                        <div class="p1">东门：10台；南门：8台。</div>
                        <div class="p1">平板导览机：</div>
                        <div class="p1">正门：15台；北门：12台；</div>
                        <div class="p1">东门：10台；南门：8台。</div>
                    </div>
                </div>
            </div>
            <div class="img-box" v-if="showImg">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="/static/img/bg2.jpg" alt="">
                        </div>
                        <div class="item">
                            <img src="/static/img/bg3.jpg" alt="">
                        </div>
                        <div class="item">
                            <img src="/static/img/loginbc.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="video-box" v-else>
                <video :src="playurl" controls :autoplay="true" loop @ended="videoPlay()"></video>
            </div>
        </div>
        <div class="loading" v-show="!complete">
            <div class="spinner">
                <div class="spinner-container container1">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container2">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container3">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
            </div>
        </div>
        <!-- 确认全屏弹出框 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    本页面推荐使用全屏显示！</br>(点击确认按钮开启全屏模式，或者按键盘F11按键手动开启/关闭全屏模式)
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="fullScreen">确认</button>
                </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script>
        let videos = ['01.mp4']
        var infoDisplay = new Vue({
            el: '#infoDisplay',
            data() {
                return {
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy/MM/dd'),
                    week: this.timeFormat('D'),
                    weatherHourList: [],
                    weatherIconUrl: '',
                    temperature: '',
                    weather: '',
                    complete: false,
                    videos: videos,
                    playurl: '',
                    playi: 0,
                    showImg: false
                }
            },
            created() {

            },
            mounted() {
                // this.fullScreen();
                this.modalSow();
                this.getDate();
                this.getWeather();
                this.videoPlay();
            },
            methods: {
                // 确认全屏
                modalSow() {
                    $('#myModal').modal('show')
                },
                //全屏
                fullScreen() {
                    var el = document.documentElement;
                    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;      
                    if(typeof rfs != "undefined" && rfs) {
                        rfs.call(el);
                    };
                    $('#myModal').modal('hide');
                    return;
                },
                uclick() {

                },
                //时间格式化
                timeFormat(fmt) {
                    let date = new Date();
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    }
                    var o = { 
                        "M+" : date.getMonth()+1,     //月份 
                        "d+" : date.getDate(),     //日 
                        "h+" : date.getHours(),     //小时 
                        "m+" : date.getMinutes(),     //分 
                        "s+" : date.getSeconds(),     //秒 
                        "q+" : Math.floor((date.getMonth()+3)/3), //季度 
                        "S" : date.getMilliseconds(),    //毫秒
                        "D" : week[date.getDay()]
                    }; 
                    if(/(y+)/.test(fmt)) 
                    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
                    for(var k in o) 
                    if(new RegExp("("+ k +")").test(fmt)) 
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
                    return fmt;
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy/MM/dd');
                        this.week = this.timeFormat('D')
                    },1000)
                },

                //登出
                logout() {
                    window.location.href = '/login.html'
                },

                //获取天气
                getWeather() {
                    if(localStorage.getItem('weatherHourList') || 0) {
                        let weatherData = JSON.parse(localStorage.getItem('weatherHourList'));
                        let saveTime = weatherData.saveTime;
                        let nowTime = this.timeFormat('yyyyMMdd');
                        if(saveTime == nowTime) {
                            this.weatherHourList = weatherData.list;
                             //立即渲染天气
                            this.updateWeather();
                            //每小时更新一次天气
                            setInterval(() => {
                                this.updateWeather();
                            },1000 * 60 * 60);
                            return false;
                        }
                    }
                    api.getWeather().then(res => {
                        let weatherHourList = res.data.showapi_res_body.hourList;
                        weatherHourList = {
                            saveTime: this.timeFormat('yyyyMMdd'),
                            list: weatherHourList
                        }
                        let strObj = JSON.stringify(weatherHourList);
                        localStorage.setItem('weatherHourList',strObj);
                        this.weatherHourList = weatherHourList.list;
                         //立即渲染天气
                        this.updateWeather();
                        //每小时更新一次天气
                        setInterval(() => {
                            this.updateWeather();
                        },1000 * 60 * 60);
                    }).catch((err) => {
                        console.error(err)
                    });
                },

                //渲染天气
                updateWeather() {
                    this.weatherIconUrl = './static/img/icon/day/' + this.weatherHourList[this.timeFormat('hh') > 9 ? this.timeFormat('hh') : this.timeFormat('h')].weather_code + '.png';
                    this.temperature = this.weatherHourList[this.timeFormat('hh') > 9 ? this.timeFormat('hh') : this.timeFormat('h')].temperature;
                    this.weather = this.weatherHourList[this.timeFormat('hh') > 9 ? this.timeFormat('hh') : this.timeFormat('h')].weather;
                    this.complete = true;
                },

                videoPlay() {
                    let baseUrl = 'https://xkh-1255951554.cos.ap-chengdu.myqcloud.com/video/';//腾讯云
                    // let baseUrl = './static/video/';//本地
                    this.playurl = baseUrl + this.videos[this.playi];
                    if (this.videos.length == 0) {
                        return false;
                    }
                    if(this.playi < this.videos.length -1) {
                        this.playi ++;
                    }else {
                        this.playi = 0
                    }
                }
            }
        })
    </script>
</body>
</html>